<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns:blog="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户中心-ylbnotesHub</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_x7u3h1yrrfc.css">
    <style>
        #table-title tr th{
            border: none;
        }
    </style>
</head>
<body>

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
    <div class="row">

        <aside class="col-md-3 blog-sidebar" th:fragment="articleShowPanel">

            <div class="p-4 my-3 bg-white rounded shadow-sm">

                <div class="mb-0"><!--1-->
                    <p class="text-center">
                        <img th:src="${userInfo.getAvatar()}" style="border-radius: 50%;position: relative" width="128" height="128">
                    </p>

                    <br>
                    <div class="text-center">
                        <span th:text="${userInfo.getNickname()}"></span>
                        <!--<br>-->
                        <!--<small>-->
                            <!--&lt;!&ndash;<span class="badge badge-primary">普通用户</span>&ndash;&gt;-->
                            <!--<span-->
                                    <!--th:class="${session.loginUser.getRoleId()==2?'badge badge-warning':'badge badge-success'}"-->
                                    <!--th:text="${session.loginUser.getRoleId()==2?'Vip会员':'普通用户'}">-->
                            <!--</span>-->
                        <!--</small>-->
                        <br>
                        <p class="text-center">
                            <small th:text="${#strings.abbreviate(userInfo.getBrief(),25)}"></small>
                        </p>
                        <br>
                        <bg id="artcount" th:fragment="artcount">
                            <!--判断是否登录-->
                            <bg sec:authorize="!isAuthenticated()">
                                <p>
                                    <a type="button" th:href="@{'/chat/'+${userInfo.getUid()}}" class="btn btn-outline-primary btn-sm followbtn">
                                        私信
                                    </a>
                                    <a type="button" th:href="@{'/blog/follow/'+${userInfo.getUid()}+'/'+${userInfo.getUid()}}" class="btn btn-outline-primary btn-sm followbtn">
                                        关注
                                    </a>
                                </p>
                            </bg>
                            <bg sec:authorize="isAuthenticated()">
                                <p th:unless="${session.loginUser.getUid()==userInfo.getUid()}">
                                    <a type="button" th:href="@{'/chat/'+${userInfo.getUid()}}" class="btn btn-outline-primary btn-sm followbtn">
                                        私信
                                    </a>
                                    <a type="button" href="javascript:void(0);" id="follow1" style="display: none;"
                                       th:onclick="addFollow([[${session.loginUser.getUid()}]],[[${userInfo.getUid()}]])" class="btn btn-outline-primary btn-sm followbtn">
                                        关注
                                    </a>
                                    <a type="button" href="javascript:void(0);" id="follow2" style="display: none;margin-top: 0rem"
                                       th:onclick="cancelFollow([[${session.loginUser.getUid()}]],[[${userInfo.getUid()}]])" class="btn btn-outline-primary btn-sm followbtn">
                                        已关注
                                    </a>
                                </p>
                            </bg>

                            <p>
                            <table class="table">
                                <thead id="table-title">
                                <tr>
                                    <th scope="col">文章</th>
                                    <th scope="col">关注</th>
                                    <th scope="col">粉丝</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td th:text="${articleCount}">0</td>
                                    <td th:text="${followCount}">0</td>
                                    <td th:text="${fansCount}">0</td>
                                </tr>
                                </tbody>
                            </table>
                            </p>
                        </bg>
                    </div>
                </div><!--1-->
                <hr>
            </div>

        </aside>

        <div class="col-md-9 blog-main">

            <div class="my-3 p-3 bg-white rounded shadow-sm">

                <div>
                    <!--如果没有文章-->
                    <div th:if="${blogs.getDatas().size()<=0}">
                        <div class="media text-muted pt-3">TA还没有文章~ &emsp;&emsp;
                        </div>
                    </div>

                    <!--如果有文章-->
                    <div th:if="${blogs.getDatas().size()>0}">

                        <div th:each="blog:${blogs.getDatas()}" class="media text-muted pt-3" >
                            <!--置顶-->

                            <!--不置顶-->
                            <p th:if="${blog.getSort()==0}" class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
                                <!-- 标题 -->
                                <a th:text="${blog.getTitle()}" style="font-size: 14px"
                                   th:href="@{'/article/read/'+${blog.getBid()}+'/'+${blog.getAuthorId()}}"
                                   class="text-dark font-weight-bold text-decoration-none d-block">
                                </a>
                                <br>
                                <span th:text="${blog.getOriginal()==1?'原创':''}"
                                      class="badge badge-light u-content-tab">
                                </span>&emsp;

                                <!-- 时间 -->
                                <span th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd HH:mm:ss')}"
                                      class="badge badge-light u-content-tab">
                                </span>&emsp;
                                <!-- 浏览量 -->
                                <span><i class="iconfont icon-liulan" style="font-size: 13px;"></i>
                                    [[${blog.getViews()}]]
                                </span>&emsp;

                            </p>
                        </div>

                        <!--分页-->
                        <nav aria-label="Page navigation example" class="mt-4">
                        <ul class="pagination justify-content-center pagination-sm">
                            <li th:class="${pageInfo.isHasPreviousPage()==true?'page-item':'page-item disabled'}">
                                <a class="page-link" th:href="@{'/article/blog/'+${uid}+'/'+${pageInfo.pageNum -1}+'/10'}" tabindex=""><&nbsp;</a>
                            </li>
                            <li class="page-item" th:if="${pageInfo.isHasPreviousPage()}">
                                <a class="page-link" th:href="@{'/article/blog/'+${uid}+'/'+${pageInfo.pageNum -1}+'/10'}" th:text="${pageInfo.pageNum -1}"></a>
                            </li>
                            <li class="page-item active">
                                <a class="page-link" th:href="@{'/article/blog/'+${uid}+'/'+${pageInfo.pageNum}+'/10'}" th:text="${pageInfo.pageNum}"></a>
                            </li>
                            <li class="page-item" th:if="${pageInfo.isHasNextPage()}">
                                <a class="page-link" th:href="@{'/article/blog/'+${uid}+'/'+${pageInfo.pageNum +1}+'/10'}" th:text="${pageInfo.pageNum +1}"></a>
                            </li>
                            <li th:class="${pageInfo.isHasNextPage()==true?'page-item':'page-item disabled'}">
                                <a class="page-link"  th:href="@{'/article/blog/'+${uid}+'/'+${pageInfo.pageNum +1}+'/10'}" >&nbsp;></a>
                            </li>
                        </ul>
                    </nav>

                    </div>
        </div>
                </div>
            </div>
        </div>

    </div>

</main>


<div th:replace="~{common/footer::footer}"></div>

<a class="to-top"><i class="iconfont icon-fanhuidingbu1" style="font-size:50px;color: #007bff"></i></a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script th:src="@{/js/comment.js}"></script>
<script type="text/javascript" th:inline="javascript" sec:authorize="isAuthenticated()">
    /*<![CDATA[*/
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
    /*]]>*/
    isFollow([[${session.loginUser.getUid()}]],[[${userInfo.getUid()}]])
</script>
</body>
</html>